I have an issue with our UI Storybook here that I'm unsure how to solve.

Basically this PR moves the styles from the DocsPage component to be global instead with Emotion's Global component - so we can encapsulate them in a CSS Cascade Layer. See:
https://github.com/storybookjs/storybook/pull/21150/files#diff-a9dc1d24700cb91a5a432c4f8f92413ee540546c00137eba248a9a44b2d1b4e1R448-R450

The problem is with the stories for any doc block, and the theme switcher. Our theme switcher tool has this "stacked" mode that shows the story in both light and dark theme, by rendering the story twice (see https://github.com/storybookjs/storybook/blob/20600-bug-storybook-docs-css-cascading-into-our-components/code/ui/.storybook/preview.tsx/#L196-L214). But when you render the DocsPage twice, it will set the global styles first with the light theme and then with the dark theme. And because they're global styles it means that both instances will end up with the dark theme because the global styles will override eachother, which makes the stacked view unusable.
The crucial part here is that all our Chromatic snapshots uses this stacked theme.

As an example, see this story in light theme:
https://635781f3500dd2c49e189caf-lxlyyqdibf.chromatic.com/?path=/story/storybook-blocks-blocks-description--of-component-as-component-comment&globals=theme:light
and in stacked theme (scroll):
https://635781f3500dd2c49e189caf-lxlyyqdibf.chromatic.com/?path=/story/storybook-blocks-blocks-description--of-component-as-component-comment&globals=theme:stacked
Notice in the stacked theme, how the text on the light background is barely visible, meaning the text uses the dark theme.

I can think of a few ways to get around this, but none of them are great so I'm hoping someone else will come up with better ideas.

1. Disable stacked view for any affected stories, and only render (and snapshot) the light theme. This means we won't have dark themed snapshots of doc blocks.
2. Same as above, but create duplicate stories for light and dark theme so we still have stories and snapshopts for both. This is cumbersome.
3. Special case stories so they don't use global CSS but still the old scoped CSS. This makes the stories not behave exactly like the components would in a real scenario, I'm not a fan.
4. Somehow make the stacked theme render stories in iframes or something that would still scope the global CSS independently. I'm not sure if this is even possible.
5. Drop the global styles and the CSS Cascade Layer. It wasn't what actually fixed the issue here (I believe) and it's only theoretical that it makes it easier to override, I haven't tried to build a use case that proves this has an effect in SB docs.

5. Drop the global styles and the CSS Cascade Layer.

I don't really have an opinion on this solution but it does seem like a fairly large change to make if you aren't sure it's super beneficial.

Same as above, but create duplicate stories for light and dark theme so we still have stories and snapshopts for both. This is cumbersome.

We probably only need one or two stories per doc block in the dark theme, I'm guessing? So maybe this solution isn't so onerous? The stacked approach is a bit of a hack in any case, I guess a better thing would be for Chromatic to just support multiple themes already ...

5. Drop the global styles and the CSS Cascade Layer.

I don't really have an opinion on this solution but it does seem like a fairly large change to make if you aren't sure it's super beneficial.

You're right, let's not overcomplicate things if we don't know that it brings value. I reverted that part.